<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <title>博客详情页</title>
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <img src="image/logo.jpg">
            <span>
                我的博客系统
            </span>
            <!-- 这里的space仅仅用于站位 -->
            <div class="space"></div>
            <a href="blog_list.html" >主页</a>
            <a href="blog_edit.html" >写博客</a>
            <a href="logout">注销</a>
        </div>
        <div class="container">
            <!-- 左边页面 -->
            <div class="container-left">
                <div class="card">
                    <!-- 用户头像 -->
                    <img src="image/小姐姐.jpg">
                    <!-- 用户名 -->
                    <h3>究极无敌霸王龙</h3>
                    <!-- 码云链接 -->
                    <a href="https://gitee.com/ggboy_3_0" target="_blank">github 地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                </div>
            </div>
            <!-- 右边页面 -->
            <div class="container-right">
                <!-- 代表一篇完整的博客页 -->
                <!-- 1.标题 -->
                <h3 class="title"></h3>
                <!-- 2.创建时间 -->
                <div class="date"></div>
                <!-- 3.博客内容 -->
                <div id="content">

                </div>
            </div>
        </div>

        <script src="js/jquery.min.js"></script>
            <!-- 引入 editor.md 的依赖 -->
            <!-- 这里引入的依赖要放在jquery之后,因为需要jquery提供的依赖做前提 -->
        <script src="editor.md/lib/marked.min.js"></script>
        <script src="editor.md/lib/prettify.min.js"></script>
        <script src="editor.md/editormd.js"></script>
        <script>
            // 利用ajax来发送请求
            $.ajax({
                type:'get',
                // 利用location.search来查询到当前页面的query string
                url:'blog'+ location.search,
                success: function(body) {
                    // 利用回调函数来处理返回的数据
                    // 1.更新标题
                    let titleDiv = document.querySelector('.container-right .title');
                    titleDiv.innerHTML = body.title;
                    // 2.更新日期
                    let dateDiv = document.querySelector('.date');
                    dateDiv.innerHTML = body.postTime;
                    // 3.更新博客内容
                    // 利用editor.md库中提供的api将markdown格式的数据进行转换
                    editormd.markdownToHTML('content', { markdown: body.content });
                    
                }
            })


            function checkLogin() {
                $.ajax({
                    type:'get',
                    url:'login',
                    success: function(body) {
                        if(body.userId && body.userId > 0) {
                            console.log("用户已经登录!!!");
                        } else {
                            // 这里是为登录
                            // 强制跳转到登录页面
                            location.assign('login.html');
                        }
                    }
                });
            }
            checkLogin();

            function getAuthor() {
                $.ajax({
                    type:'get',
                    url:'author'+ location.search,
                    success: function(body) {
                        let h3 = document.querySelector('.container-left .card h3');
                        h3.innerHTML = body.username;
                    }
                });
            }
            getAuthor();
        </script>
</body>
</html>